<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Color My Own Beauty.</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body class="test">
        <header class="header" id="header">
            <nav class="nav">
                <a href="#" class="nav__logo">
                    <div>
                        <!-- <img src="img/ts_logo_2x-v2.png" alt="Logo" /> -->
                        Color My Own Beauty.
                    </div>
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list" data-lang="en" data-display="flex">
                        <li class="nav__item"><a href="index.html" class="nav__link">Home</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="theory.html" class="nav__link">Theory</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="test.html" class="nav__link">Test</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="contact.html" class="nav__link">Contact</a></li>
                    </ul>
                    <ul class="nav__list" data-lang="zh" data-display="flex">
                        <li class="nav__item"><a href="index.html" class="nav__link">首页</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="theory.html" class="nav__link">四季理论</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="test.html" class="nav__link">测试</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="contact.html" class="nav__link">联系我们</a></li>
                    </ul>

                    <div class="switch">
                        <label class="switch-labels left">EN</label>
                        <input type="checkbox" id="langToggle" onchange="toggleLang()" />
                        <span class="slider round"></span>
                        <label class="switch-labels right">CN</label>
                    </div>
                </div>
            </nav>
        </header>

        <div class="banner"></div>

        <main data-lang="en" data-display="block">
            <h1>Season Color Test</h1>
            <div class="content">
                <div class="item">
                    <h2>1. What's the type of your skin color?</h2>
                    <img src="" alt="" />
                    <div class="options">
                        <div class="option" data-ans="1-1">Cool White</div>
                        <div class="option" data-ans="1-2">Warm Yellow</div>
                    </div>
                </div>
                <div class="item">
                    <h2>2. What's the color your eye?</h2>
                    <img src="" alt="" />
                    <div class="options">
                        <div class="option" data-ans="2-1">Black</div>
                        <div class="option" data-ans="2-2">Brown</div>
                    </div>
                </div>
                <div class="item">
                    <h2>3. Do you have light skin or dark skin?</h2>
                    <img src="" alt="" />
                    <div class="options">
                        <div class="option" data-ans="3-1">Dark</div>
                        <div class="option" data-ans="3-2">Light</div>
                    </div>
                </div>
                <div class="item">
                    <h2>4. Do you have dark hair or light hair?</h2>
                    <img src="" alt="" />
                    <div class="options">
                        <div class="option" data-ans="4-1">Dark</div>
                        <div class="option" data-ans="4-2">Light</div>
                    </div>
                </div>
            </div>

            <button class="btn">Submit</button>

            <div class="result">
                <h2>Your Style Recommendation ...</h2>

                <!-- <p>
                    Based on your choices, we recommend a mixed style approach. Focus on versatile pieces that can be
                    dressed up or down.
                </p> -->
            </div>
        </main>
        <main data-lang="zh" data-display="block">
            <h1>色彩季节类型测试</h1>
            <div class="content">
                <div class="item">
                    <h2>1. 判断肤色冷暖?</h2>
                    <img src="" alt="" />
                    <div class="options">
                        <div class="option" data-ans="1-1">冷白</div>
                        <div class="option" data-ans="1-2">暖黄</div>
                    </div>
                </div>
                <div class="item">
                    <h2>2. 判断瞳孔颜色?</h2>
                    <img src="" alt="" />
                    <div class="options">
                        <div class="option" data-ans="2-1">黑色</div>
                        <div class="option" data-ans="2-2">棕色</div>
                    </div>
                </div>
                <div class="item">
                    <h2>3. 判断肤色深浅?</h2>
                    <img src="" alt="" />
                    <div class="options">
                        <div class="option" data-ans="3-1">深色</div>
                        <div class="option" data-ans="3-2">浅色</div>
                    </div>
                </div>
                <div class="item">
                    <h2>4. 判断发色深浅?</h2>
                    <img src="" alt="" />
                    <div class="options">
                        <div class="option" data-ans="4-1">深发</div>
                        <div class="option" data-ans="4-2">浅发</div>
                    </div>
                </div>
            </div>
            <button class="btn">提交</button>
            <div class="result">
                <h2>您的色彩季节类型为 ...</h2>
            </div>
        </main>
        <footer>
            <p>© 2024 Color My Own Beauty. All rights reserved.</p>
        </footer>

        <script>
            let lang = 'en';

            let options = document.querySelectorAll(`main[data-lang="${lang}"] .option`);
            let result = document.querySelector(`main[data-lang="${lang}"] .result`);
            let btn = document.querySelector(`main[data-lang="${lang}"] .btn`);

            const answersMap = {
                spring: [2222, 2122, 2121, 2221],
                summer: [1222, 1212, 1211, 1221],
                autumn: [2211, 2111, 2112, 2212],
                winter: [1111, 1121, 1122, 1112]
            };
            const styleTextMap = {
                en: {
                    spring: {
                        type: 'spring',
                        desc: 'Cool White',
                        makeup: 'Sunny Side Up'
                    },
                    summer: {
                        type: 'summer',
                        desc: 'Warm Yellow',
                        makeup: 'Bronzer'
                    },
                    autumn: {
                        type: 'autumn',
                        desc: 'Warm Yellow',
                        makeup: 'Bronzer'
                    },
                    winter: {
                        type: 'winter',
                        desc: 'Cool White',
                        makeup: 'Sunny Side Up'
                    }
                },
                zh: {
                    spring: {
                        type: '春季',
                        desc: '明亮活泼的颜色，比如杏色、薄荷绿、牛奶粉',
                        makeup: '日杂妆、元气蜜桃妆'
                    },
                    summer: {
                        type: '夏季',
                        desc: '轻柔、淡雅的颜色，比如灰蓝色、肉桂奶茶色等莫兰迪色系',
                        makeup: '蓝色牛仔妆、清冷白开水妆'
                    },
                    autumn: {
                        type: '秋季',
                        desc: '温暖、浓郁的颜色，比如大地色、金棕色、砖红色',
                        makeup: '奶茶妆、秋日可可妆、亚裔辣妹妆'
                    },
                    winter: {
                        type: '冬季',
                        desc: '明艳大气、对比度高的配色，比如黑色、紫罗兰、酒红色',
                        makeup: '紫色截断妆、纯野妆、蛇系小烟熏妆'
                    }
                }
            };

            const answer = [0, 0, 0, 0];

            options.forEach(option => {
                console.log('option', option);
                option.addEventListener('click', e => {
                    const [serial, res] = e.target.dataset.ans.split('-');
                    if (e.target.classList.contains('active')) {
                        e.target.classList.remove('active');
                        answer[serial - 1] = 0;
                    } else {
                        e.target.parentNode.querySelectorAll('.active').forEach(item => {
                            item.classList.remove('active');
                        });
                        e.target.classList.add('active');
                        answer[serial - 1] = res;
                    }
                });
            });

            const getSeason = () => {
                const res = answer.join('');
                for (const key of Object.keys(answersMap)) {
                    if (answersMap[key].includes(+res)) return key;
                }
            };

            btn.addEventListener('click', () => {
                if (!answer.includes(0)) {
                    const season = getSeason();
                    const type = styleTextMap[lang][season].type;
                    const desc = styleTextMap[lang][season].desc;
                    const makeup = styleTextMap[lang][season].makeup;
                    if (lang === 'en') {
                        result.innerHTML = `
                         <h2 data-lang="en" data-display="block">Your Style Recommendation <strong>${type}</strong></h2>
                    `;
                        // <p>
                        //         Based on your choices, we recommend a <strong>${type}</strong> type approach. Focus on versatile pieces that can be
                        //         dressed up or down. Your skin type is ${desc}, and your makeup is ${makeup}.
                        //     </p>
                    } else {
                        result.innerHTML = `
                           <h2 data-lang="zh" data-display="block">您的色彩季节类型为 <strong>${type}</strong></h2>
                               <p>适合${desc}</p>
                            <p>妆容：${makeup}</p>
                    `;
                    }
                } else {
                    if (lang === 'en') {
                        alert('Please select all options.');
                    } else {
                        alert('请完成所有选项。');
                    }
                }
            });

            const zhDiv = document.querySelectorAll('[data-lang="zh"]');
            const enDiv = document.querySelectorAll('[data-lang="en"]');

            zhDiv.forEach(function (el) {
                el.style.display = 'none';
            });

            function toggleLang() {
                const checkbox = document.getElementById('langToggle');
                if (checkbox.checked) {
                    // Change to Chinese
                    document.documentElement.lang = 'zh';
                    lang = 'zh';
                    options = document.querySelectorAll(`main[data-lang="${lang}"] .option`);
                    console.log('options', options[0]);
                    result = document.querySelector(`main[data-lang="${lang}"] .result`);
                    btn = document.querySelector(`main[data-lang="${lang}"] .btn`);
                    zhDiv.forEach(function (el) {
                        const display = el.getAttribute('data-display');
                        el.style.display = display;
                    });
                    enDiv.forEach(function (el) {
                        el.style.display = 'none';
                    });
                } else {
                    // Change to English
                    document.documentElement.lang = 'en';
                    lang = 'en';
                    options = document.querySelectorAll(`main[data-lang="${lang}"] .option`);
                    result = document.querySelector(`main[data-lang="${lang}"] .result`);
                    btn = document.querySelector(`main[data-lang="${lang}"] .btn`);
                    enDiv.forEach(function (el) {
                        const display = el.getAttribute('data-display');
                        el.style.display = display;
                    });
                    zhDiv.forEach(function (el) {
                        el.style.display = 'none';
                    });
                }
            }
        </script>
    </body>
</html>
